<template>
  <div class="pay container">
    <Header>
      <router-link to='/decision' slot='left' tag='i' class="iconfont icon-jiantou1"></router-link>
      支付订单
    </Header>
    <div class="paynotice">
      <p class="date">支付剩余时间 <van-count-down :time="time" /></p>
      <p class="payprice">
        ￥ <span>{{ price }}</span>
      </p>
    </div>
    <van-radio-group v-model="flag">
      <ul class="payway">
        <li class="paywayli">
          <p>
            <i class="iconfont icon-weixinzhifu"></i>
            <span>微信支付</span>
          </p>
          <van-radio name="1" checked-color="#fed500"></van-radio>
        </li>
        <li class="paywayli">
          <p>
            <i class="iconfont icon-zhifubaozhifu"></i>
            <span>支付宝支付</span>
          </p>
          <van-radio name="2" checked-color="#fed500"></van-radio>
        </li>
      </ul>
    </van-radio-group>
    <button class="paybtn" @click="paybtn">立即支付 ￥{{ price }}</button>
    <div class="popup" v-if="show">
      <ul class="password">
        <li>
          <span v-if="index>=0">·</span>
        </li>
        <li>
          <span v-if="index>=1">·</span>
        </li>
        <li>
          <span v-if="index>=2">·</span>
        </li>
        <li>
          <span v-if="index>=3">·</span>
        </li>
        <li>
          <span v-if="index>=4">·</span>
        </li>
        <li>
          <span v-if="index>=5">·</span>
        </li>
      </ul>
      <van-number-keyboard
        :show="show"
        theme="custom"
        extra-key="."
        close-button-text="完成"
        @blur="show = false"
        @input="onInput"
        @delete="onDelete"
        @close="judge"
      />
    </div>
  </div>
</template>
<script>
import Header from '@/components/header.vue'
import Vue from 'vue'
import { RadioGroup, Radio, CountDown, NumberKeyboard, Popup, Toast } from 'vant'
import axios from '@/utils/request'
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(CountDown)
Vue.use(NumberKeyboard)
Vue.use(Popup)
export default {
  components: {
    Header
  },
  data () {
    return {
      date: '15:00',
      price: sessionStorage.getItem('price') || '22.00',
      flag: '1',
      time: 60 * 60 * 1000 * 15,
      show: false,
      index: -1,
      str: '',
      password: '123123'
    }
  },
  methods: {
    paybtn () {
      this.show = true
    },
    onInput (key) {
      this.str += key
      this.index += 1
    },
    onDelete () {
      this.index -= 1
      this.str = this.str.slice(0, this.str.length - 1)
    },
    judge () {
      if (this.password === this.str) {
        var couponid = sessionStorage.couponid
        var orderid = sessionStorage.orderid
        var userid = localStorage.userid
        var p1 = new Promise((resolve, reject) => {
          axios.get('/order?userid=' + userid + '&orderid=' + orderid).then(res => {
            var data = res.data.data[0]
            data.proid = data.proid + ','
            data.num = data.num + ','
            axios.post('/orderpro/add', {
              userid,
              proid: data.proid,
              num: data.num
            })
          }).then(() => {
            axios.post('/order/del', {
              orderid
            }).then(() => {
              resolve()
            })
          })
        })
        var p2 = new Promise((resolve, reject) => {
          axios.post('/coupon/update', {
            userid,
            couponid,
            state: 2
          }).then(() => {
            resolve()
          })
        })
        var p3 = new Promise((resolve, reject) => {
          axios.post('/integral/add', {
            userid,
            state: 1,
            num: parseInt(this.price),
            tip: '购物获得积分'
          }).then(() => {
            if (sessionStorage.inte && sessionStorage.inte > 0) {
              axios.post('/integral/add', {
                userid,
                state: 2,
                num: sessionStorage.inte,
                tip: '购物使用积分'
              }).then(() => {
                resolve()
              })
            } else {
              resolve()
            }
          })
        })
        Promise.all([p1, p2, p3]).then(() => {
          Toast('支付成功')
          this.$router.push('/user')
        })
      } else {
        Toast('支付密码错误')
      }
      this.index = -1
      this.str = ''
    }
  }
}
</script>
<style lang="scss">
@import '@/lib/reset.scss';
.pay {
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .paynotice {
    @include rect(100%, auto);
    @include padding(.3rem 0);
    @include text-align();
    .payprice {
      @include margin(.1rem 0);
      @include font-size(.18rem);
      @include font-weight();
      span {
        @include font-size(.36rem);
      }
    }
  }
  .payway {
    @include rect(100%, auto);
    .paywayli {
      @include padding(.16rem .1rem);
      @include flexbox();
      @include justify-content(space-between);
      @include font-size(.2rem);
      p {
        @include flexbox();
        @include align-items();
        i {
          @include margin(0 .08rem);
          @include color(rgb(9, 187, 7));
          @include font-size(.26rem);
        }
      }
      &:last-child {
        p {
          i {
            @include color(rgb(0, 161, 233));
          }
        }
      }
    }
  }
  .paybtn {
    @include rect(90%, .5rem);
    @include background-color(#ffd300);
    @include margin(auto);
    @include font-size(.2rem);
    @include font-weight();
    @include color(#666666);
    border: none;
    letter-spacing: .02rem;
  }
  .popup {
    @include rect(100%, 100%);
    @include background-color(rgba(0, 0, 0, .6));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    .password {
      @include rect(100%, 1.9rem);
      @include background-color(#fff);
      @include flexbox();
      @include justify-content();
      @include padding(.5rem 0);
      position: absolute;
      top: 40%;
      left: 0;
      li {
        @include rect(.6rem, .6rem);
        @include border(1px, #dddddd, solid);
        @include text-align();
        @include line-height(.6rem);
        @include font-size(.5rem);
        @include font-weight();
      }
      li + li {
        @include border(1px 0 1px 1px, #dddddd, solid);
      }
      li {
        &:last-child {
          @include border(1px, #dddddd, solid);
        }
      }
    }
  }
}
</style>
